<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>

		<view v-show="!loadingone">
			<navbar name="消息"></navbar>
			<u-sticky>
				<view class="tabsView">
					<u-tabs height="100" item-width="180" bg-color="#fff" font-size="30rpx" bar-width="80"
						active-color="#2EA7E0" :list="list" :is-scroll="true" :current="current" @change="change">
					</u-tabs>
				</view>
			</u-sticky>
			<!-- 系统 -->
			<view v-if="current ==0">
				<block v-for="(item,idx) in records" :key="idx">
					<view class="timeView">
						{{item.updateTime}}
					</view>
					<navigator class="w690" v-show="item.messageTitle == '商品推荐'" target="miniProgram"
						open-type="navigate" app-id="wxeb719b5bc850729e" :path="item.messageUrl" extra-data=""
						version="release" hover-class="hoverbgfff">
						<view class="xt-title">
							{{item.messageTitle}}
						</view>
						<u-line />
						<view class="news-style">
							{{item.messageBody[0]}}<text class="red">{{item.nickName||''}}</text>{{item.messageBody[1]||''}}
						</view>
					</navigator>
					<view class="w690" v-show="item.messageTitle != '商品推荐'" @tap="commodityTap(item,idx,'commodity')">
						<view class="xt-title">
							{{item.messageTitle}}
						</view>
						<u-line />
						<view class="news-style">

							{{item.messageBody[0]}}<text class="red">{{item.nickName||''}}</text>{{item.messageBody[1]||''}}
						</view>
					</view>
				</block>
			</view>
			<!-- 评论 -->
			<view v-if="current ==1">
				<view class="current-one" v-if="records.length!=0">
					<block v-for="(item,idx) in records" :key="idx">
						<view class="currentView" @tap.stop="commentTap(item,idx,'comment')">
							<view class="userImage">
								<u-lazy-load height="96" border-radius="50" img-mode="aspectFill"
									:image="item.avatarUrl">
								</u-lazy-load>
							</view>
							<view class="content-view">
								<view class="usetname-text ellipsis">
									{{item.nickName}}
								</view>
								<view class="user-news ellipsis">
									{{item.messageBody}}
								</view>
								<view class="news-time">
									{{item.updateTime}}
								</view>
							</view>
							<view class="articleImg">
								<!-- <u-lazy-load height="96" border-radius="10" img-mode="aspectFill"
									:image="item.forumCoverUrl">
								</u-lazy-load> -->
							</view>
						</view>
						<u-line />
					</block>
				</view>
			</view>
			<!-- 新粉丝 -->
			<view v-if="current ==2">
				<view class="current-one" v-if="records.length!=0">
					<block v-for="(item,idx) in records" :key="idx">
						<view class="currentView">
							<view class="userImage">
								<u-lazy-load height="96" border-radius="50" img-mode="aspectFill"
									:image="item.avatarUrl">
								</u-lazy-load>
							</view>
							<view class="content-view">
								<view class="fans-name ellipsis">
									{{item.nickName}}
								</view>
								<view class="fans-gz">
									关注了你
								</view>
							</view>
							<view class="attentionView">
								<button v-show="item.mutualFollowFlag == 1" class="attention"
									type="default" :disabled="disabled" @tap.stop="attention(item,idx,'XQ')">+关注</button>
								<button v-show="item.mutualFollowFlag == 2" class="attention"
									type="default" :disabled="disabled" @tap.stop="attention(item,idx,'XQ')">回关</button>
								<button v-show="item.mutualFollowFlag == 3" class="attention-hx"
									type="default" :disabled="disabled" @tap.stop="attention(item,idx,'XQ')">互相关注</button>
								<button v-show="item.mutualFollowFlag == 4" class="attention-hx"
									type="default" :disabled="disabled" @tap.stop="attention(item,idx,'XQ')">已关注</button>
							</view>
						</view>
						<u-line />
					</block>
				</view>
			</view>
			<!-- 获赞 -->
			<view v-if="current ==3">
				<view class="current-one" v-if="records.length!=0">
					<block v-for="(item,idx) in records" :key="idx">
						<view class="currentView" @tap.stop="commentTap(item,idx,'comment')">
							<view class="userImage">
								<u-lazy-load height="96" border-radius="50" img-mode="aspectFill"
									:image="item.avatarUrl">
								</u-lazy-load>
							</view>
							<view class="content-view">
								<view class="usetname-text ellipsis">
									{{item.nickName}}
								</view>
								<view class="user-news ellipsis">
									<!-- 赞了你的分享 -->
									{{item.messageBody}}
								</view>
								<view class="news-time">
									{{item.updateTime}}
								</view>
							</view>
							<view class="articleImg">
								<u-lazy-load height="96" border-radius="10" img-mode="aspectFill"
									:image="item.forumCoverUrl">
								</u-lazy-load>
							</view>
						</view>
						<u-line />
					</block>
				</view>
			</view>
		</view>
		<view v-if="records.length <=0" style="text-align: center;color: #9B9B9B;font-size: 30upx;">
			<view class="noDataicon">
			</view>
			暂无消息
		</view>
	</view>
</template>

<script>
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

import uLine from "@/uview-ui/components/u-line/u-line.vue"
import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"

import uTabs from "@/uview-ui/components/u-tabs/u-tabs.vue"

import uSticky from "@/uview-ui/components/u-sticky/u-sticky.vue"

	export default {
		components: {
			uLoading,
			uLine,
			uLazyLoad,
			uTabs,
			uSticky,
		},
		data() {
			return {
				messageUrl:'',
				disabled:false,
				loadingone: false, //懒加载
				records: [], //数据列表
				pageCurrent: 1,
				pageSize: 10,
				list: [{
					name: '系统',
					count: 0
				}, {
					name: '评论',
					count: 0
				}, {
					name: '新粉丝',
					count: 0
				}, {
					name: '获赞',
					count: 0
				}],
				current: 0,
				sectionCurrent: 0,
			}
		},
		onLoad() {
			// this.userMessage()
			this.myCount()
			this.userMessage(1, this.pageCurrent, this.pageSize)
		},
		onShow() {
		},
		methods: {
			// 关注
			follow(id,index) {
				this.disabled = true
				let _this = this,
					fdata = {
						followedId: id, //被关注id
						userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
					};
				this.$cms.post(global.apiUrls.follow, fdata).then(res => {
					if (res.data.code == 1000) {
						uni.showToast({
							title: '关注成功',
							duration: 2000
						});
						let records = _this.records;
						if(records[index].mutualFollowFlag ==  2){//回关
							_this.records[index].mutualFollowFlag = 3//互相关注
						}else if(records[index].mutualFollowFlag == 1){//+关注
							_this.records[index].mutualFollowFlag = 4 //已关注
						}
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
					}
					_this.disabled = false
				})
			},
			// 取关
			DeleteFollow(id,index) {
				this.disabled = true
				let _this = this,
					fdata = {
						followedId: id, //被关注id
						userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
					};
				this.$cms.delete(global.apiUrls.follow, fdata).then(res => {
					if (res.data.code == 1000) {
						uni.showToast({
							title: '取关成功',
							duration: 2000
						});
						let records = _this.records;
						if(records[index].mutualFollowFlag == 3){//互相关注
							_this.records[index].mutualFollowFlag = 2//会关注
						}else if(records[index].mutualFollowFlag == 4){//已关注
							_this.records[index].mutualFollowFlag = 1//+关注
						}
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
					}
					_this.disabled = false
				})
			},
			// 关注按钮
			attention(item, idx, type) {
				if (item.mutualFollowFlag == 3||item.mutualFollowFlag == 4) { //取关
					this.DeleteFollow(item.fromId,idx);
				}  else if (item.mutualFollowFlag == 2||item.mutualFollowFlag == 1) { //关注
					this.follow(item.fromId,idx);
				}
			},
			// 评论点击事件
			commentTap(item, idx, type) {
				if(item.delFlag == 1){
					uni.showToast({
					    title: '此分享已删除',
						icon:'none',
					    duration: 2000
					});
				}else{
					uni.navigateTo({
						url: '/pages/subpackage/find/share/share?forumId=' + item.forumId
					})
				}

			},
			// 商品去详情
			commodityTap(item, index, type) {
				uni.reLaunch({
					url: item.messageUrl
				})
				// } else if (item.messageTitle == '评估提醒') { //去评估
				// 	uni.navigateTo({
				// 		url: '/pages/subpackage/home/oneAccess/evaluating'
				// 	})
				// }else if(item.messageTitle == '计划提醒'){
				// 	uni.switchTab({
				// 		url:'/pages/tab/home'
				// 	})
				// }
			},
			userMessagePut(typeId) {
				let fdata = {
					typeId: typeId,
					userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
				}
				this.$cms.put(global.apiUrls.userMessage, fdata)
					.then(res => {
					}).catch(err => {})
			},
			// 获取消息条数
			myCount() {
				let _this = this;
				this.$cms.get(global.apiUrls.myCount, {sourceType:1})
					.then(res => {
						let result = res.data.result;
						let list = _this.list;
						list[0].count = result.system; //系统数量
						list[1].count = result.comment; //评论数量
						list[2].count = result.fans; //评论数量
						list[3].count = result.like; //获赞数量
						_this.list = list
					})
			},
			userMessage(typeId, pageCurrent, pageSize) {
				//sourceType=1 用户小程序 不查询 商城的消息 互关标识1:关注2：回关3：互相关注4：已关注 5:商品推送 6: 节日关怀 (后台 排除掉 5 6)
				let _this = this;
				this.$cms.get(global.apiUrls.userMessage + '?typeId=' + typeId + '&sourceType=1' + '&userId=' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId + '&pageCurrent=' + pageCurrent + '&pageSize=' + pageSize, {})
					.then(res => {
						let records = res.data.result.records;
						for (let i = 0; i < records.length; i++) {
							if (typeId == 1) { //系统
								records[i].messageBody = records[i].messageBody.split('{}')
								// let messageBody = JSON.parse(records[i].messageBody);
								// records[i].messageBody = messageBody.nickName
								// records[i].systemType = messageBody.systemType;
								// records[i].text = messageBody.text
								records[i].updateTime = _this.$basejs.formatMsgTimePl(records[i].updateTime)
							} else if (typeId == 2) { //评论
								records[i].updateTime = _this.$basejs.formatMsgTimePl(records[i].updateTime)
							} else if (typeId == 3) { //新粉丝

							} else if (typeId == 4) { //点赞
								records[i].updateTime = _this.$basejs.formatMsgTimePl(records[i].updateTime)
							}
						}
						_this.records = records;
						console.log(records, 2544444)
					}).catch(err => {})
			},
			change(index) {
				this.current = index;
				this.userMessagePut(index + 1) //修改状态
				this.userMessage(index + 1, this.pageCurrent, this.pageSize);
			}
		}
	}
</script>
<style lang="scss">
	.noDataicon {
		width: 213upx;
		height: 209upx;
		background: url(https://bsyjk-pic.bsyjk.cn/empty/EFF804A9156249AD920DEF9CC805EFC7.png)no-repeat;
		background-size: 213upx 209upx;
		margin: 400upx auto 30upx;
	}
	.timeView {
		height: 88upx;
		line-height: 88upx;
		font-size: 24upx;
		font-weight: 400;
		color: #9B9B9B;
		text-align: center;
	}

	.w690 {
		width: 690upx;
		background: #FFFFFF;
		border-radius: 20upx;
		margin: 0 auto;
		padding: 20upx 20upx 30upx;
		box-sizing: border-box;
	}

	.xt-title {
		height: 60upx;
		line-height: 42upx;
		padding-bottom: 17upx;
		font-size: 30upx;
		font-weight: bold;
		color: #2C2C2C;
		position: relative;
	}

	.xt-title::before {
		content: '';
		position: absolute;
		top: 4upx;
		right: 10upx;
		width: 36upx;
		height: 36upx;
		//background: url(https://bsyjk-pic.bsyjk.cn/arrows/1CB6DDEEB08E4CE0A40E8E86A99D1A0D.png)no-repeat;
		background-size: 36upx 36upx;
	}

	.news-style {
		font-size: 24upx;
		font-weight: 500;
		color: #9B9B9B;
		line-height: 33upx;
		padding: 25upx 0 0;

		.red {
			color: #F56767;
			padding: 0 10upx;
		}
	}

	.current-one {
		width: 750upx;
		min-height: 1150upx;
		margin: 10upx auto 0;
		background: #FFFFFF;
	}

	.currentView {
		width: 708upx;
		margin: 0 auto;
		padding: 30upx 0;
		display: flex;

		.userImage {
			width: 96upx;
			height: 96upx;
			margin-right: 19upx;
		}

		.content-view {
			width: 450upx;
			font-size: 26upx;
			color: #9B9B9B;

			.fans-name {
				padding: 11upx 0;
				color: #333333;
			}

			.fans-gz {
				font-size: 24upx;
			}

			.usetname-text {
				font-weight: 500;
				color: #333333;
				line-height: 37upx;
			}

			.news-time {
				font-size: 20upx;
			}
		}

		.articleImg {
			width: 100upx;
			height: 100upx;
			margin-left: 20upx;
		}

		.attentionView {
			width: 130upx;

			.attention,
			.attention-hx {
				margin: 20upx 0 0;
				width: 130upx;
				height: 50upx;
				background: #FF930A;
				border-radius: 13upx;
				border: 2upx solid #FF930A;
				font-size: 24upx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 50upx;
				padding: 0;
			}

			.attention-hx {
				color: #9B9B9B;
				background: #E2E1E2;
				border: none;
			}
		}
	}
</style>
